<template>
  <view class="fullPage">
    <!-- #ifdef MP-WEIXIN -->

    <view :style="{ height: navbarHeight + 'px' }">
      <u-navbar
        leftIconSize="36rpx"
        leftText="返回"
        bgColor="#3867ab"
        leftIconColor="#fff"
        title="考试成绩编辑"
        :autoBack="true"
        titleStyle="color: #fff;font-size: 32rpx;"
      >
      </u-navbar>
    </view>
    <!--  #endif -->

    <view class="pageBody">
      <view class="driverType">
        <u-tabs activeStyle="color:#f56c6c;" :list="tabList" @click="clickTab"></u-tabs>
      </view>

      <view class="scoreItem" v-for="(item, index) in scoreList" :key="index">
        <view class="scoreItem_title">
          <view class="scoreType">{{ item.title }}</view>
          
        </view>
        <view class="scoreItem_content">
          <view class="scoreFen" style="margin-right: 112rpx">考试成绩</view>
          <view class="scoreFen"><u--input
                customStyle="width: 60rpx;height: 32rpx;"
    placeholder="分数"
    border="surround"
    v-model="item.score"
  ></u--input> 分</view>
        </view>
      </view>
      <view style="padding: 20px;">
		<u-button @click="submit" type="primary" text="生成考试成绩"></u-button>
	</view>
    <view style="font-size:24rpx;color:#f56c6c;">温馨提示：本页面展示的成绩信息仅供参考，不作为最终法律依据。实际考试成绩请以公安交管部门官方系统记录为准。如对成绩有异议，请及时向考试主管部门反映核实。</view>

    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
        checkedTab:"C1",
        tabList: [{
                    name: 'C1',
                }, {
                    name: 'C2',
                },{
                    name: 'A1',
                }, {
                    name: 'A2',
                },{
                    name: 'B1',
                }, {
                    name: 'B2',
                }, {
                    name: 'D',
                },{
                    name: '不展示'
                },],
      navbarHeight: 0, // 默认高度
      scoreList: [
        {
          title: "科目一",
          score: "0",
          isContent: "",
          isOk: true,
        },
        {
          title: "科目二",
          score: "0",
          isContent: "",
          isOk: true,
        },
        {
          title: "科目三  道路驾驶技能考试",
          score: "0",
          isContent: "",
          isOk: true,
        },
        {
          title: "科目三  安全文明常识考试",
          score: "0",
          isContent: "",
          isOk: true,
        },
      ],
    };
  },

  methods: {
    submit(){
console.log(this.scoreList);
if(this.checkedTab != '不展示'){
    // 将this.scoreList中每一项的title拼接上checkedTab
    this.scoreList.forEach((item, index) => {
        // item.title匹配是否有 考试 二字，如果有替换为空字符串
        // item.title = item.title.replace(/考试/g, "");
        this.scoreList[index].title =   item.title.replace(/考试/g, "") +' ('+this.checkedTab+')';
      });
    

}
//存入本地存储,存储成功后跳转jiakaoInfo页面
uni.setStorage({
	key: 'score_key',
	data: this.scoreList,
	success:  ()=> {
		console.log('success');
        uni.navigateTo({
			url: '/subpage/jiakaoInfo/jiakaoInfo'
		});
	}
});


    },
    clickTab(item){
this.checkedTab =item.name
    },
    scoreIsYes(title, score) {
      let isContent = "合格";
      let isOk = true;

      if (parseInt(score) >= 80 && title.indexOf("科目二") > -1) {
        isOk = true;
        isContent = "合格";
      } else {
        isOk = false;
        isContent = "不合格";
      }

      if (parseInt(score) >= 90) {
        isOk = true;
        isContent = "合格";
      }

      if (parseInt(score) == 0) {
        isOk = false;
        isContent = "未考试";
      }

      return { isContent, isOk };
    },
    // 获取设备信息并计算 navbar 高度
    setNavbarHeight() {
      uni.getSystemInfo({
        success: (res) => {
          // 假设 navbar 高度为 44px 加上状态栏高度
          this.navbarHeight = 44 + res.statusBarHeight;
          console.log("设备信息", this.navbarHeight);
        },
        fail: (err) => {
          console.error("获取系统信息失败", err);
        },
      });
    },
  },
  onLoad(options) {
    this.setNavbarHeight();
  },
  onShow() {
    this.scoreList=[
        {
          title: "科目一",
          score: "0",
          isContent: "",
          isOk: true,
        },
        {
          title: "科目二",
          score: "0",
          isContent: "",
          isOk: true,
        },
        {
          title: "科目三  道路驾驶技能考试",
          score: "0",
          isContent: "",
          isOk: true,
        },
        {
          title: "科目三  安全文明常识考试",
          score: "0",
          isContent: "",
          isOk: true,
        },
      ]
  }
};
</script>
<style lang="scss" scoped>
.fullPage {
  height: 100vh;
  background: #f7f8fa;
  .pageBody {
    padding: 0 34rpx;
    // padding-top: 176rpx;
    .driverType{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        color: #50a473;
        // height: 200rpx;
    }
    .scoreItem {
      width: 646rpx;
    //   height: 120rpx;
      margin-top: 26rpx;
      background: #fff;
      border-radius: 15rpx;
      padding: 36rpx 0rpx 36rpx 36rpx;
      .scoreItem_title {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .scoreType {
          font-size: 34rpx;
          color: #232323;
          font-weight: 600;
          margin-right: 28rpx;
        }
        .scoreYes {
          height: 28rpx;
          padding: 10rpx 18rpx 10rpx 18rpx;
          font-size: 28rpx;
          line-height: 26rpx;
          background: #afe6bf;
          color: #50a473;
          border-radius: 10rpx;
        }
        .scoreNo {
          height: 28rpx;
          padding: 10rpx 18rpx 10rpx 18rpx;
          font-size: 28rpx;
          line-height: 26rpx;
          background: #fcc8c8;
          color: #f56c6c;
          border-radius: 10rpx;
        }
      }

      .scoreItem_content {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 34rpx;
        .scoreFen {
            display: flex;
        justify-content: flex-start;
        align-items: center;
          color: #0b0b0b;
          font-size: 32rpx;
        }
      }
    }
  }
}
</style>
